Profile picture

[SW-CSS] 파일 관리 방식에 대한 고민...

Amaranth2024년 08월 18일

나는 지금까지 AWS와 같은 클라우드 서버만 사용해왔었다. 지금 내가 근무하고 있는 센터에서 개발하고 있는 역량지원시스템 서비스는 물리적인 서버를 제공받아 사용하고 있기 때문에, 이러한 환경을 고려하여 DB나 리소스를 저장하는 방식을 고민할 필요가 있었다. 난 주로 파일과 같은 리소스를 관리하기 위해 S3를 활용했었는데, 이 환경에서는 S3를 사용하기 어려우니 간단하게 서버 내 파일시스템에 적재하기로 했다.

S3는 적재된 리소스가 갖는 url만 있다면 프론트엔드에서 바로 리소스에 접근할 수 있기 때문에, 별다른 처리 절차가 필요하지 않다. 이는 프론트엔드 성능 면에서도 좋은 방식이다. 하지만 우린 파일 시스템에 리소스를 적재하고 있기 때문에, 리소스의 이름을 db에 저장하고, 리소스의 이름을 요청받으면 해당 파일 데이터를 응답하는 api를 만들었다. 이렇게 하면 프론트에서 해당 api를 호출해 Blob 타입의 데이터를 얻고 URL.createObjectURL(file)으로 파일 리소스에 접근할 수 있는 url을 만들어야, 해당 파일에 접근할 수 있게 된다. 프론트엔드에서 파일에 접근하는 경우는 주로 파일의 미리보기(img 태그, embed 태그 활용)를 구현할 때이다. 이 방식은 S3에 비해 api를 2번 호출해야 하고, 프론트엔드에서 처리해야 할 로직이 많다는 문제가 있다. 그리고 URL.createObjectURL(file)는 브라우저 환경에서만 작동하기 때문에, 서버사이드에서는 사용할 수 없어 성능 저하에 영향을 미칠 수 있다.

이 방법이 최선이라고 생각하며 개발을 하다가, 새로 할당받은 기능을 구현하던 중 섬네일 이미지가 있는 데이터를 다건 조회하는 UI를 구현하게 되었는데, 이 방식이라면 이미지를 불러오는 성능이 너무 나빠질 것 같다는 생각이 강하게 들었다. 그래서 잠시 머리를 식히고 고민을 해봤다. 캐싱을 할 수 있는 방법이 있나? 일단 여러 개의 파일을 한 번에 반환하는 api부터 만들어야 하나? ...스프링 서버도 S3처럼 리소스에 접근할 수 있는 방법이 없을까?

마지막 의문이 들자마자 검색엔진에 쳐봤는데, 딱 내가 찾던 글을 발견했다. [Spring] 외부에서 서버 파일에 접근할 수 있도록 설정하기 (작성자님 감사합니다...) 그래서 기존에 구현했던 파일 요청 API를 삭제하고, 프론트에서 서버 리소스에 바로 접근할 수 있게 설정을 해주었더니 고민했던 성능 문제가 대부분 해결되었다.


Loading script...